<template>
  <view class="emergency-rescue-page">
    <!-- 顶部提示 -->
    <view class="top-notice">
      <image class="notice-icon" src="/static/应急救援.png"></image>
      <text class="notice-text">: 救援服务暂不支持高速救援，高速救援请查看【警务求助】</text>
    </view>

    <!-- 高德地图 -->
	<view id="amapContainer" class="amap-container"></view>

    <!-- 标签栏 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 0 }" 
        @click="switchTab(0)"
      >
        搭电
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 1 }" 
        @click="switchTab(1)"
      >
        换胎
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 2 }" 
        @click="switchTab(2)"
      >
        拖车
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 搭电/换胎内容 -->
      <view class="form-section" v-if="currentTab === 0 || currentTab === 1">
        <view class="form-item">
          <text class="label">位置</text>
          <input class="input" placeholder="河南省焦作市山阳区32号" />
        </view>
        <view class="form-item">
          <text class="label">求助人</text>
          <input class="input" placeholder="杨子" />
        </view>
        <view class="form-item">
          <text class="label">联系方式</text>
          <input class="input" placeholder="15523632541" />
        </view>
        <view class="form-item">
          <text class="label">车牌</text>
          <input class="input" placeholder="豫CJ4321" />
        </view>
      </view>

      <!-- 拖车内容 -->
      <view class="form-section" v-else>
        <view class="form-item">
          <text class="label">起点</text>
          <input class="input" placeholder="河南省焦作市山阳区32号" />
        </view>
        <view class="form-item">
          <text class="label">终点</text>
          <input class="input" placeholder="" />
        </view>
        <view class="form-item">
          <text class="label">求助人</text>
          <input class="input" placeholder="杨子" />
        </view>
        <view class="form-item">
          <text class="label">联系方式</text>
          <input class="input" placeholder="15523632541" />
        </view>
        <view class="form-item">
          <text class="label">车型</text>
          <picker class="picker" mode="selector" :range="carTypes" @change="onCarTypeChange">
            <view class="picker-view">
              {{ carTypes[selectedCarType] }}
            </view>
          </picker>
        </view>
      </view>

      <!-- 描述提示 -->
      <view class="desc">
        请准确描述当前状况豫所需帮助。
      </view>

      <!-- 警务求助 -->
      <view class="police-help">
        <text class="police-title">警务求助</text>
        <view class="police-item">
          <text>交通事故</text>
          <text class="phone">122</text>
        </view>
        <view class="police-item">
          <text>火警</text>
          <text class="phone">119</text>
        </view>
        <view class="police-item">
          <text>急救中心</text>
          <text class="phone">120</text>
        </view>
        <view class="police-item">
          <text>公安报警</text>
          <text class="phone">110</text>
        </view>
      </view>

      <!-- 呼叫救援按钮 -->
      <button class="call-btn">呼叫救援</button>

      <!-- 救援记录 -->
      <view class="record" @click="goRecord">救援记录&gt;</view>
    </view>
  </view>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  data() {
    return {
	map: null,
      // 标签栏
      currentTab: 0, // 当前选中的标签（0:搭电, 1:换胎, 2:拖车）

      // 拖车车型
      carTypes: ["请选择", "小型车", "大型车", "新能源"],
      selectedCarType: 0,

      // 救援记录
      rescueRecords: [], // 可从接口获取
    };
  },
  onReady() {
      // 页面渲染完成后初始化地图（需确保容器已存在）
      this.initMap();
    },
  methods: {
    // 切换标签
    switchTab(tab) {
      this.currentTab = tab;
    },

    // 选择车型
    onCarTypeChange(e) {
      this.selectedCarType = e.detail.value;
    },

    // 前往救援记录
    goRecord() {
      uni.navigateTo({
        url: "/pages/rescue-record/rescue-record",
      });
    },
	initMap() {
	     // 动态加载高德 API
	     const script = document.createElement('script');
	     script.type = 'text/javascript';
	     script.src = `https://webapi.amap.com/maps?v=2.0&key=f0510425d9c61c040a460360f6af7c20&callback=initAMap`; // 替换为你的Key
	     document.body.appendChild(script);
		  
	     // 定义全局回调函数，初始化地图
	     window.initAMap = () => {
	       this.map = new AMap.Map('amapContainer', {
	         zoom: 13, // 初始缩放级别
	         center: [116.397428, 39.90923] // 初始中心点（北京坐标）
	       });
		  
	       // 可选：添加标记点
	       const marker = new AMap.Marker({
	         position: [116.397428, 39.90923], // 标记点坐标
	         title: '起点'
	       });
	       this.map.add(marker);
	     };
	 },
			onUnload() {
			      // 页面卸载时销毁地图，释放资源
			      if (this.map) {
			        this.map.destroy();
			      }
			      window.initAMap = null; // 清除全局回调
			},
  },
};
</script>

<style scoped>
/* 页面容器 */
.emergency-rescue-page {
  background-color: #fff;
}

/* 顶部提示 */
.top-notice {
  display: flex;
  align-items: center;
  background-color: #fff3cd;
  padding: 10rpx 20rpx;
  border-bottom: 1px solid #ffeeba;
}

.notice-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

.notice-text {
  font-size: 24rpx;
  color: #856404;
}

/* 高德地图 */
.amap-container {
  width: 100%;
  height: 400rpx;
}

.amap {
  width: 100%;
  height: 100%;
}

/* 标签栏 */
.tab-bar {
  display: flex;
  border-bottom: 1px solid #f5f5f5;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #333;
}

.tab-item.active {
  color: #ff5722;
  border-bottom: 2px solid #ff5722;
}

/* 内容区域 */
.content {
  padding: 20rpx;
}

/* 表单部分 */
.form-section {
  background-color: #f9f9f9;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
}

.label {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.input {
  height: 60rpx;
  border: 1px solid #ccc;
  border-radius: 5rpx;
  padding: 0 10rpx;
  font-size: 26rpx;
}

/* 拖车 - 车型选择 */
.picker {
  width: 100%;
}

.picker-view {
  height: 60rpx;
  line-height: 60rpx;
  border: 1px solid #ccc;
  border-radius: 5rpx;
  padding: 0 10rpx;
  font-size: 26rpx;
  color: #666;
}

/* 描述提示 */
.desc {
  font-size: 24rpx;
  color: #ff0000;
  margin-bottom: 20rpx;
}

/* 警务求助 */
.police-help {
  background-color: #f9f9f9;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.police-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.police-item {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.phone {
  color: #007aff;
}

/* 呼叫救援按钮 */
.call-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #ff9900;
  color: #fff;
  font-size: 32rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

/* 救援记录 */
.record {
  text-align: center;
  font-size: 26rpx;
  color: #007aff;
}
</style>
